<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>桂北程序员 - 成就IT黑马 | IT培训</title>

        <link rel="stylesheet" href="/css/user.css">
        <link rel="stylesheet" href="/css/component/nav.css">
        <link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
        <link rel="stylesheet" href="/css/bootstrap/bootstrap-icons-1.11.3/font/bootstrap-icons.css">
    </head>
    <body>
        <span class="u-tabs-bar"></span>
        <div class="root">
            <div class="main-content">
                <div class="container" style="margin-top: 24px;">
                    <div class="row">
                        <div class="col-lg-9">
                            <div class="u-tabs u-block">
                                
                                <ul class="nav nav-tabs nav-pills">
                                    <li class="nav-item">
                                        <a href="#" class="nav-link active"  data-toggle="tab" data-target="#up-home">
                                            <i class="bi bi-house mr-1"></i>
                                            主页
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="#" class="nav-link" data-toggle="tab" data-target="#up-course">
                                            <i class="bi bi-collection mr-1"></i>
                                            课程
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="#" class="nav-link"  data-toggle="tab" data-target="#up-notice">
                                            <i class="bi bi-send mr-1"></i>
                                            消息
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="#" class="nav-link"  data-toggle="tab" data-target="#up-my">
                                            <i class="bi bi-person-circle mr-1"></i>
                                            我的
                                        </a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div id="up-home" class="tab-pane fade show active">

                                        <div class="course-context course-context-row">
                                            <p class="title">最近在学</p>
                                            <div class="row mt-2">
                                                <div class="col-8 col-md-5 col-lg-4 my-2 px-1">
                                                    <a class="course" href="#">
                                                        <div class="img">
                                                            <img src="/statics/upload/items/course-ict/500fa332bb8244bcb1aa895a84844644_1.png" alt="" srcset="">
                                                        </div>
                                                        <div class="content">
                                                            <p>华为ICT大赛 2023-2024 实践赛云赛道真题实战课程</p>
                                                            <div class="progress">
                                                                <div class="progress-bar" style="width: 30%;"></div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                                <div class="col-8 col-md-5 col-lg-4 my-2 px-1">
                                                    <a class="course" href="#">
                                                        <div class="img">
                                                            <img src="/statics/upload/items/course-ict/399e71241c3e4a5c803becbe69f7ff54_HCIP-openEulerV1.0.png" alt="" srcset="">
                                                        </div>
                                                        <div class="content">
                                                            <p>HCIP-openEuler认证课程</p>
                                                            <div class="progress">
                                                                <div class="progress-bar" style="width: 30%;"></div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                                <div class="col-8 col-md-5 col-lg-4 my-2 px-1">
                                                    <a class="course" href="#">
                                                        <div class="img">
                                                            <img src="/statics/upload/items/course-ict/556e5b7ec7f84ee891d3c46cb70c7bab_HCIP-openGaussV1.0.png" alt="" srcset="">
                                                        </div>
                                                        <div class="content">
                                                            <p>HCIP-openGaussV1.0</p>
                                                            <div class="progress">
                                                                <div class="progress-bar" style="width: 30%;"></div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="course-context">
                                            <p class="title">收藏夹</p>
                                            <div class="row mt-2">
                                                <div class="col-8 col-md-5 col-lg-4 my-2 px-1">
                                                    <a class="course" href="#">
                                                        <div class="img">
                                                            <img src="/statics/upload/items/course-ict/500fa332bb8244bcb1aa895a84844644_1.png" alt="" srcset="">
                                                        </div>
                                                        <div class="content">
                                                            <p>华为ICT大赛 2023-2024 实践赛云赛道真题实战课程</p>
                                                            <div class="progress">
                                                                <div class="progress-bar" style="width: 30%;"></div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                                <div class="col-8 col-md-5 col-lg-4 my-2 px-1">
                                                    <a class="course" href="#">
                                                        <div class="img">
                                                            <img src="/statics/upload/items/course-ict/399e71241c3e4a5c803becbe69f7ff54_HCIP-openEulerV1.0.png" alt="" srcset="">
                                                        </div>
                                                        <div class="content">
                                                            <p>HCIP-openEuler认证课程</p>
                                                            <div class="progress">
                                                                <div class="progress-bar" style="width: 30%;"></div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                                <div class="col-8 col-md-5 col-lg-4 my-2 px-1">
                                                    <a class="course" href="#">
                                                        <div class="img">
                                                            <img src="/statics/upload/items/course-ict/556e5b7ec7f84ee891d3c46cb70c7bab_HCIP-openGaussV1.0.png" alt="" srcset="">
                                                        </div>
                                                        <div class="content">
                                                            <p>HCIP-openGaussV1.0</p>
                                                            <div class="progress">
                                                                <div class="progress-bar" style="width: 30%;"></div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                                <div class="col-8 col-md-5 col-lg-4 my-2 px-1">
                                                    <a class="course" href="#">
                                                        <div class="img">
                                                            <img src="/statics/upload/items/course-java/084356c95b1f524755.jpg" alt="" srcset="">
                                                        </div>
                                                        <div class="content">
                                                            <p>Java15 新特性</p>
                                                            <div class="progress">
                                                                <div class="progress-bar" style="width: 30%;"></div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="up-course" class="tab-pane fade">
                                        <div class="course-context">
                                            <p class="title">全部课程</p>
                                            <div class="row mt-2">
                                                <div class="col-md-6 col-lg-4 my-2 px-1">
                                                    <a class="course" href="#">
                                                        <div class="img">
                                                            <img src="/statics/upload/items/course-ict/500fa332bb8244bcb1aa895a84844644_1.png" alt="" srcset="">
                                                        </div>
                                                        <div class="content">
                                                            <p>华为ICT大赛 2023-2024 实践赛云赛道真题实战课程</p>
                                                            <div class="progress">
                                                                <div class="progress-bar" style="width: 30%;"></div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                                <div class="col-md-6 col-lg-4 my-2 px-1">
                                                    <a class="course" href="#">
                                                        <div class="img">
                                                            <img src="/statics/upload/items/course-ict/399e71241c3e4a5c803becbe69f7ff54_HCIP-openEulerV1.0.png" alt="" srcset="">
                                                        </div>
                                                        <div class="content">
                                                            <p>HCIP-openEuler认证课程</p>
                                                            <div class="progress">
                                                                <div class="progress-bar" style="width: 30%;"></div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                                <div class="col-md-6 col-lg-4 my-2 px-1">
                                                    <a class="course" href="#">
                                                        <div class="img">
                                                            <img src="/statics/upload/items/course-ict/556e5b7ec7f84ee891d3c46cb70c7bab_HCIP-openGaussV1.0.png" alt="" srcset="">
                                                        </div>
                                                        <div class="content">
                                                            <p>HCIP-openGaussV1.0</p>
                                                            <div class="progress">
                                                                <div class="progress-bar" style="width: 30%;"></div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                                <div class="col-md-6 col-lg-4 my-2 px-1">
                                                    <a class="course" href="#">
                                                        <div class="img">
                                                            <img src="/statics/upload/items/course-ict/556e5b7ec7f84ee891d3c46cb70c7bab_HCIP-openGaussV1.0.png" alt="" srcset="">
                                                        </div>
                                                        <div class="content">
                                                            <p>HCIP-openGaussV1.0</p>
                                                            <div class="progress">
                                                                <div class="progress-bar" style="width: 30%;"></div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                                <div class="col-md-6 col-lg-4 my-2 px-1">
                                                    <a class="course" href="#">
                                                        <div class="img">
                                                            <img src="/statics/upload/items/course-ict/556e5b7ec7f84ee891d3c46cb70c7bab_HCIP-openGaussV1.0.png" alt="" srcset="">
                                                        </div>
                                                        <div class="content">
                                                            <p>HCIP-openGaussV1.0</p>
                                                            <div class="progress">
                                                                <div class="progress-bar" style="width: 30%;"></div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                                <div class="col-md-6 col-lg-4 my-2 px-1">
                                                    <a class="course" href="#">
                                                        <div class="img">
                                                            <img src="/statics/upload/items/course-ict/556e5b7ec7f84ee891d3c46cb70c7bab_HCIP-openGaussV1.0.png" alt="" srcset="">
                                                        </div>
                                                        <div class="content">
                                                            <p>HCIP-openGaussV1.0</p>
                                                            <div class="progress">
                                                                <div class="progress-bar" style="width: 30%;"></div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>  
                                            </div>
                                        </div>
                                        <nav class="mt-4">
                                            <ul class="pagination">
                                              <li class="page-item"><a class="page-link" href="#"><span aria-hidden="true">&laquo;</span></a></li>
                                              <li class="page-item"><a class="page-link" href="#">1</a></li>
                                              <li class="page-item"><a class="page-link" href="#">2</a></li>
                                              <li class="page-item"><a class="page-link" href="#">3</a></li>
                                              <li class="page-item"><a class="page-link" href="#"><span aria-hidden="true">&raquo;</span></a></li>
                                            </ul>
                                        </nav>
                                    </div>
                                    <div id="up-notice" class="tab-pane fade">
                                        <div class="mt-3 d-flex justify-content-end align-items-center">
                                            <span class="mr-2">共23条未读消息</span>
                                            <button id="notice-read" class="btn btn-primary btn-sm mr-2">全部已读</button>
                                            <button id="notice-clean" class="btn btn-secondary btn-sm">清空已读</button>
                                        </div>
                                        <div class="u-notice mt-1">
                                            <p class="n-empty text-center d-none" style="font-size: 14px;">暂无任何通知</p>
                                            <div class="media mb-2">
                                                <i class="bi bi-info-circle-fill mr-2 text-primary"></i>
                                                <div class="media-body">
                                                    <p class="mb-1">
                                                        <span class="title">【系统通知】</span>
                                                        <span class="badge badge-danger badger-pill">1</span>
                                                    </p>
                                                    <p>恭喜你啊年轻人，你成功的被我恭喜到了。</p>
                                                </div>
                                            </div>
                                            <div class="media mb-2">
                                                <i class="bi bi-info-circle-fill mr-2 text-primary"></i>
                                                <div class="media-body">
                                                    <p class="mb-1">
                                                        <span class="title">【系统通知】</span>
                                                        <span class="badge badge-danger badger-pill">1</span>
                                                    </p>
                                                    <p>恭喜你啊年轻人，你成功的被我恭喜到了。</p>
                                                </div>
                                            </div>
                                            <div class="media mb-2">
                                                <i class="bi bi-info-circle-fill mr-2 text-primary"></i>
                                                <div class="media-body">
                                                    <p class="mb-1">
                                                        <span class="title">【系统通知】</span>
                                                        <span class="badge badge-danger badger-pill">1</span>
                                                    </p>
                                                    <p>恭喜你啊年轻人，你成功的被我恭喜到了。</p>
                                                </div>
                                            </div>
                                            <div class="media mb-2">
                                                <i class="bi bi-info-circle-fill mr-2 text-primary"></i>
                                                <div class="media-body">
                                                    <p class="mb-1">
                                                        <span class="title">【系统通知】</span>
                                                        <span class="badge badge-danger badger-pill">1</span>
                                                    </p>
                                                    <p>恭喜你啊年轻人，你成功的被我恭喜到了。</p>
                                                </div>
                                            </div>
                                            <div class="media mb-2">
                                                <i class="bi bi-info-circle-fill mr-2 text-primary"></i>
                                                <div class="media-body">
                                                    <p class="mb-1">
                                                        <span class="title">【系统通知】</span>
                                                        <span class="badge badge-danger badger-pill">1</span>
                                                    </p>
                                                    <p>恭喜你啊年轻人，你成功的被我恭喜到了。</p>
                                                </div>
                                            </div>
                                            <div class="media mb-2">
                                                <i class="bi bi-info-circle-fill mr-2 text-primary"></i>
                                                <div class="media-body">
                                                    <p class="mb-1">
                                                        <span class="title">【系统通知】</span>
                                                        <span class="badge badge-danger badger-pill">1</span>
                                                    </p>
                                                    <p>恭喜你啊年轻人，你成功的被我恭喜到了。</p>
                                                </div>
                                            </div>
                                        </div>
                                        <nav class="mt-4">
                                            <ul class="pagination">
                                              <li class="page-item"><a class="page-link" href="#"><span aria-hidden="true">&laquo;</span></a></li>
                                              <li class="page-item"><a class="page-link" href="#">1</a></li>
                                              <li class="page-item"><a class="page-link" href="#">2</a></li>
                                              <li class="page-item"><a class="page-link" href="#">3</a></li>
                                              <li class="page-item"><a class="page-link" href="#"><span aria-hidden="true">&raquo;</span></a></li>
                                            </ul>
                                        </nav>
                                    </div>
                                    <div id="up-my" class="tab-pane fade">
                                        <div class="u-my">
                                            <form class="text-left text-sm-right" id="my-form" action="">
                                                <div class="form-group row">
                                                    <label class="col-sm-2 col-form-label">昵称：</label>
                                                    <div class="col-sm-8 p-0">
                                                        <input id="u-m-name" type="text" class="form-control" placeholder="输入你的名字" />
                                                        <div class="invalid-feedback">总得有个名字吧</div>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label for="" class="col-sm-2 col-form-label">个性签名：</label>
                                                    <div class="col-sm-8 p-0">
                                                        <textarea id="u-m-sign" style="min-height: 88px;max-height: 128px;" rows="3" class="form-control" placeholder="宫花一落已成尘"></textarea>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label for="" class="col-sm-2 col-form-label">邮箱：</label>
                                                    <div class="col-sm-8 p-0">
                                                        <input id="u-m-email" type="email" class="form-control" placeholder="where are you?"  />
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label for="" class="col-sm-2 col-form-label">头像：</label>
                                                    <div class="col-sm-8 p-0 align-items-center d-flex">
                                                        <div class="custom-file text-left">
                                                            <input type="file" class="custom-file-input" name="" id="custom-file" />
                                                            <label for="custom-file" class="custom-file-label" data-browse="选择图片">留空不更新，选择一个图片上传</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label for="" class="col-sm-2 col-form-label">性别：</label>
                                                    <div class="col-sm-8 p-0">
                                                        <div id="u-m-gender" class="d-flex justify-content-start align-items-center" style="height: 100%;">
                                                            <div class="custom-control custom-radio custom-control-inline">
                                                                <input type="radio" id="custom-gender-man" name="gender" value="1" class="custom-control-input">
                                                                <label class="custom-control-label" for="custom-gender-man">男</label>
                                                            </div>
                                                            <div class="custom-control custom-radio custom-control-inline">
                                                                <input type="radio" id="custom-gender-female" name="gender" value="2" class="custom-control-input">
                                                                <label class="custom-control-label" for="custom-gender-female">女</label>
                                                            </div>
                                                            <div class="custom-control custom-radio custom-control-inline">
                                                                <input type="radio" class="custom-control-input" name="gender" value="3" id="custom-gender-secret" />
                                                                <label for="custom-gender-secret" class="custom-control-label">不告诉你</label>
                                                            </div>
                                                        </div>
                                                        
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label for="" class="col-sm-2 col-form-label">修改密码：</label>
                                                    <div class="col-sm-8 p-0">
                                                        <input id="u-m-pwd" type="password" class="form-control" placeholder="留空即不更改"  />
                                                    </div>
                                                </div>
                                                <div class="d-flex justify-content-end">
                                                    <button id="my-form-submit" style="width: 256px;"
                                                        class="btn btn-primary align-items-center d-flex justify-content-center" 
                                                    >
                                                        <div class="spinner-border d-none spinner-border-sm mr-1" role="status">
                                                            <span class="sr-only">Loading...</span>
                                                        </div>
                                                        保存
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                        <div class="d-none d-sm-none d-md-none d-lg-block col-lg-3">

                            <div class="u-info u-block">
                                <div class="head d-flex justify-content-center">
                                    <img id="i-img" src="/statics/upload/user/default-user.png" alt="" srcset="">
                                </div>
                                <p id="i-name" class="text-center mt-4 mb-0" style="font-size: 20px;font-weight: bold;">Sleep</p>
                                <p id="i-email" class="text-center my-0 text-muted" style="font-size: 14px;">moluer@github.com</p>
                                <p id="i-signature" class="text-center my-2 signature">该用户只想抽个时间睡大觉</p>

                                <div class="row mt-4 text-center record">
                                    <div class="col-4 p-1">
                                        <p id="i-c-report" class="mb-1" style="font-size: 20px;font-weight: bold;">12</p>
                                        <p style="font-size: 14px;">回复</p>
                                    </div>
                                    <div class="col-4 p-1 record-mid">
                                        <p id="i-learnTime" class="mb-1" style="font-size: 20px;font-weight: bold;">12<sub>H</sub></p>
                                        <p style="font-size: 14px;">学习时长</p>
                                    </div>
                                    <div class="col-4 p-1">
                                        <p id="i-c-like" class=" mb-1" style="font-size: 20px;font-weight: bold;">12</p>
                                        <p style="font-size: 14px;">点赞</p>
                                    </div>
                                </div>

                                <div class="d-flex justify-content-center mt-2">
                                    <button id="u-like" class="btn btn-success btn-sm mx-1">点赞</button>
                                    <button id="u-report" class="btn btn-danger btn-sm mx-1">举报</button>
                                </div>
                            </div>

                            <div class="u-tags u-block mt-3">
                                <div class="title">
                                    <i class="bi bi-ubuntu mr-1"></i>
                                    <span>我的标签</span>
                                </div>
                                <div class="content">
                                    <span>ICT</span>
                                    <span>开发</span>
                                    <span>java</span>
                                    <span>c/c++</span>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>



            </div>
        </div>
        <div class="toast">
            
        </div>
    </body>

    <script src="/js/jquery-3.7.1.min.js"></script>
    <script src="/js/bootstrap/bootstrap.bundle.min.js"></script>
    <script type="module" src="/js/main-nav.js"></script>
    <script type="module" src="/js/user.js"></script>

</html>